<template>
	<view class="archDetail">
		<navBar isBack backColor="#fff" title="全屋" color="#fff" background="transparent"></navBar>
		<view class="aS_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		<view class="content" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="title">
				<view class="itemLeft">
					<image :src="`${baseImg}/static/constr/folder.png`" mode=""></image>
					{{name}}
				</view>
				<view class="reset_btn" @click="reaetName">重命名</view>
				<view class="imgPos">
					<image :src="`${baseImg}/static/constr/zhuangshi.png`" mode=""></image>
					<image :src="`${baseImg}/static/constr/zhuangshi.png`" mode=""></image>
				</view>
			</view>
			<view class="itemList">
				<view class="item" v-for="(item,index) in cateItemList" :key="index" @click="toDetail(item.id)" :style="index==cateItemList.length-1?'border:none':''">
					{{item.title}}
					<i class="iconfont icon-jinru"></i>
				</view>
			</view>
		</view>
		
		<!-- 添加按钮 -->
		<view class="btn">
			<view class="btnLeft" @click="toPower">
				<view class="img">
					<i class="iconfont" v-if="!power">&#xe61d;</i>
					<i class="iconfont" v-else>&#xe8ad;</i>
					<!-- <image :src="`${baseImg}/static/constr/storage.png`" mode=""></image> -->
				</view>
				{{power?'完成':'管理'}}
			</view>
			<view  class="btnAuto">
				<button v-if="!power" class="addBtn" type="default" @click="submitFN">添加</button>
				<button v-else class="addBtn" type="default" @click="toDel">确认删除</button>
			</view>
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="8" class="pop">
			<view class="popBox">
				<h3>重命名</h3>
				<view class="ipt">
					<input type="text" v-model="cateName" value="" placeholder="请输入分类名" />
				</view>
				<view class="popBtn">
					<button type="default" @click="toClose">取消</button>
					<button class="btn2" type="default" @click="toAdd">确认</button>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="show1" mode="center" border-radius="8" class="pop pop1">
			<view class="popBox">
				<h3>请选择添加的档案类型</h3>
				<view class="ipt">
					上传文件请前往PC后台
				</view>
				<view class="popBtn">
					<button type="default" @click="toImg">图片+文字</button>
					<button class="btn2" type="default" @click="toVideo">视频+文字</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import service_constr from '@/service/constr.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				navHeight:0,
				power:false,
				cateItemList:[],
				show:false,
				show1:false, //选择上传图片还是视频
				id:null, //目录id
				cateName:'',
				name:'',
				order_id:null, //订单id
			}
		},
		onLoad(options) {
			this.navHeight = 192 - Number(this.$store.state.system.navBarHeight)*2
			this.id = options.id
			this.name = options.name
			this.getList()
		},
		onShow() {
			this.getList()
		},
		methods:{
			// 获取项目列表
			getList(){
				service_constr.getArchList({category_id:this.id}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.cateItemList = res.data?res.data:[]
					}else{
						this.cateItemList = []
					}
				})
			},
			
			// 点击管理
			toPower(){
				if(this.power){
					this.power = false
				}else{
					this.power = true
				}
			},
			
			// 进入档案详情
			toDetail(id){
				uni.navigateTo({
					url:`archAdd?archId=${id}`
				})
			},
			
			// 点击重命名
			reaetName(){
				this.show = true
				this.cateName = this.name
			},
			// 弹框取消
			toClose(){
				this.show = false
			},
			// 弹框确定
			toAdd(){
				let params = {
					id:this.id,
					name:this.cateName
				}
				service_constr.resetName(params).then(res=>{
					if(res.code==1){
						uni.showToast({
							title:'修改成功',
							icon:'success'
						});
						this.resetOpen = false
						this.name = this.cateName
						this.cateName = ''
						this.show = false
					}
				})
			},
			
			// 点击添加按钮
			submitFN(){
				this.show1 = true
			},
			
			// 选择图片+文字
			toImg(){
				this.show1 = false
				uni.navigateTo({
					url:`./archAdd?id=${this.id}&order_id=${this.order_id}&type=0`
				})
			},
			// 选择视频+文字
			toVideo(){
				this.show1 = false
				uni.navigateTo({
					url:`./archAdd?id=${this.id}&order_id=${this.order_id}&type=1`
				})
			},
			
			// 点击确认删除
			toDel(){
				uni.showModal({
					title: '提示',
					content: '确定要删除此项吗？',
					success: res => {
						if(res.confirm){
							service_constr.delCate({id:this.id}).then(res=>{
								if(res.code==1){
									uni.showToast({
										title:'删除成功',
										icon:'success'
									});
									uni.navigateBack({
										delta:1
									})
								}
							})
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	@import '../iconfont.css';
	.archDetail{
		height: 100%;
		.aS_topImg{width: 100%;height: 192rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		.content{
			padding: 34rpx 24rpx;
			.title{
				display: flex;
				width: 702rpx;
				padding: 0 24rpx;
				height: 100rpx;
				align-items: center;
				border-radius: 16rpx;
				margin: 0 auto 12rpx;
				position: relative;
				justify-content: space-between;
				background-color: #fff;
				.itemLeft{
					image{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
					display: flex;
					align-items: center;
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
				}
				.reset_btn{
					width: 114rpx;
					height: 48rpx;
					background-color: #DBA954;
					font: 400 22rpx/48rpx PingFang SC;
					border-radius: 26rpx;
					color: #fff;
					text-align: center;
				}
				.imgPos{
					display: flex;
					justify-content: space-between;
					width: 100%;
					image{width: 20rpx;height: 46rpx;}
					padding: 0 78rpx;
					position: absolute;
					bottom: -36rpx;
					left: 0;
				}
			}
			
			.itemList{
				padding: 24rpx 0;
				background-color: #fff;
				border-radius: 16rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font: 400 26rpx/40rpx #0A0605;
					padding: 40rpx 28rpx;
					border-bottom: 2rpx solid #F5F5F5;
					i{color: #D8D8D8;}
				}
			}
		}
		// 添加按钮
		.btn{
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			height: 100rpx;
			display: flex;
			padding: 0rpx 24rpx;
			align-items: center;
			justify-content: space-between;
			height: calc(100rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(100rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.btnLeft{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 44rpx;
				font: 400 18rpx/20rpx PingFang SC;
				color: #A0A0A0;
				.img{
					width: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 50%;
					margin-bottom: 6rpx;
					background-color: #F5F5F5;
					text-align: center;
					i{font-size: 30rpx;color: #0A0605;}
				}
			}
			.btnAuto{
					margin: 10rpx auto;
				.addBtn{
					width: 606rpx;
					height: 80rpx;
					background-image: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
					box-shadow: 0px 6rpx 12rpx rgba(219, 169, 84, 0.3);
					border-radius: 46rpx;
					font: 500 32rpx/80rpx PingFang SC;
					color: #fff;
				}
			}
			.btn2{
				display: flex;
				button{
					width: 288rpx;
					height: 80rpx;
					border-radius: 46rpx;
					background-color: #fff;
					border: 2rpx solid #DBA954;
					font: 500 32rpx/80rpx PingFang SC;
					color: #DBA954;
				}
				.delBtn{
					color: #fff;
					margin-left: 30rpx;
					background-image: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				}
			}
			
		}
			// 弹框
			.pop{
				.popBox{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 528rpx;
					// height: 240rpx;
					padding: 40rpx 48rpx 40rpx 48rpx;
					h3{font: 600 30rpx/40rpx PingFang SC;color: #292A2B;}
					.ipt{
						padding: 24rpx 4rpx;
						border-bottom: 2rpx solid #D8D8D8;
					}
					.popBtn{
						display: flex;
						justify-content: space-between;
						button{
							width: 196rpx;
							height: 64rpx;
							border-radius: 32rpx;
							background-color: #F5F5F5;
							font: 400 26rpx/64rpx PingFang SC;
							color: #0A0605;
						}
						.btn2{
							background-color: #EBB964;
							color: #fff;
						}
					}
				}
			}
			
			.pop1{
				.popBox{
					h3{text-align: center;}
					.ipt{border: none;text-align: center;}
				}
				.popBtn{
					button:nth-child(1){
						border: 2rpx solid #EBB964;
						background-color: #fff;
						color: #EBB964;
					}
				}
			}
		
	}
</style>
